<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>1_引出生命周期</title>
</head>
<body>
  <!-- 准备一个容器 -->
  <div id="test"></div>

  <!-- 引入react核心插件 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <!-- 操作DOM插件 -->
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <!-- jsx转js插件 -->
  <script type="text/javascript" src="../js/babel.min.js"></script>


  <script type="text/babel">
    // 创建组件
    // 生命周期回调函数 <=> 生命周期钩子函数 <=> 生命周期函数 <=> 生命周期钩子
    class Life extends React.Component{
      // 初始化状态
      state = {
        opacity: 1
      }

      // 按钮事件
      sitUp = ()=>{
        // 卸载组件
        ReactDOM.unmountComponentAtNode(document.getElementById('test'))
      }

      // 调用时机: 组件挂载完毕
      componentDidMount(){
        console.log(`定时器启动`)
        // 定时器 200ms 执行一次
        this.timer = setInterval(() => {
          // 获取原始状态
          let {opacity} = this.state
          // 改变状态
          opacity -= 0.1
          if(opacity <= 0 ) opacity = 1
          // 更新状态, 将原始 opacity 修改为改变状态后的 opacity
          this.setState({opacity: opacity})
        }, 200)
      }

      // 调用时机: 组件将要被卸载时
      componentWillUnmount(){
        // 清除定时器
        clearInterval(this.timer)
        console.log(`定时器清除完成`)
      }

      // render 调用时机: 初次渲染、状态更新
      render(){
        console.log(`计数`)
        return(
          <div>
            <h3 style={{opacity: this.state.opacity}}>如果生活只是大梦一场, 该怎么办!!! —— 瓦依娜</h3>
            <button onClick={this.sitUp}>惊坐起</button>
          </div>
        )
      }
    }

    // 渲染组件到页面
    ReactDOM.render(<Life />, document.getElementById('test'))
  </script>

</body>
</html>